<template>
    <div class="front">
      <el-form :model="searchForm" label-width="120px">
        <el-form-item class="input" label="加工厂名称">
          <el-input v-model="searchForm.name" />
        </el-form-item>
      </el-form>
      <el-button class="search" type="primary" @click="onSearch">查询</el-button>
    </div>
  
  
    <div class="tail">
      <div class="tail-action">
        <el-button type="primary" @click="openAdd">新建加工厂</el-button>
      </div>
      <el-table :data="tableData()" border style="width: 100%">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="processorName" label="加工厂名称" min-width="60" />
        <el-table-column prop="processorType" label="加工厂类型" min-width="60" />
        <el-table-column prop="defaulttime" label="默认加工周期(单位：天)" min-width="60" />
        <el-table-column prop="processortime" label="工费结算周期" min-width="60" />
        <el-table-column prop="lendAmountLimit" label="结算方式" min-width="60" />
        <el-table-column prop="contactPersonName" label="加工厂对接人姓名" min-width="60" />
        <el-table-column prop="contactPersonPhone" label="加工厂对接人手机号码" min-width="60" />
        <el-table-column prop="createname" label="收款人姓名" min-width="60" />
        <el-table-column prop="createaccount" label="收款人账号" min-width="60" />
        <el-table-column prop="createbank" label="收款人开户行" min-width="60" />
        <el-table-column prop="remark" label="备注" min-width="60" />
        <el-table-column fixed="right" label="操作" min-width="60">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleOpenEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" size="small" @click="handleDeleteProcessor(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination v-model="data.page" :page-size="data.limit"
          layout="prev, pager, next ,total,sizes" :total="data.total" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" />
      </div>
    </div>
    
    <div class="dialog-list">
      <el-dialog v-model="dialogVisible1" title="新建加工厂" width="30%" :close-on-click-modal="true" :show-close="false">
        <div>
          <el-form :model="processorForm" label-width="120px" :rules="processorRules">
            <el-form-item label="加工厂编码" prop="processorCode" :required="true">
              <el-input v-model="processorForm.processorCode" disabled/>
            </el-form-item>
            <el-form-item label="加工厂名称" prop="processorName" :required="true">
              <el-input v-model="processorForm.processorName" />
            </el-form-item>
            <el-form-item label="加工厂类型" prop="processorType" :required="true">
              <el-select v-model="processorForm.processorType">
              <el-option label="镶嵌" value="镶嵌"></el-option>
              <el-option label="抛光" value="抛光"></el-option>
              <el-option label="证书机构" value="证书机构"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
             </el-form-item>  
             <el-form-item label="默认加工周期(单位：天)" :required="true">
  <el-input v-model="processorForm.defaulttime" v-model.number="processorForm.defaulttime" @blur="addUnit" />
</el-form-item>
            <el-form-item label="结算方式" prop="lendAmountLimit" :required="true">
              <el-select v-model="processorForm.lendAmountLimit">
              <el-option label="银行转账" value="银行转账"></el-option>
              <el-option label="支付宝转账" value="支付宝转账"></el-option>
              <el-option label="微信转账" value="微信转账"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="工费结算周期" :required="true">
  <el-select v-model="processorForm.processortime" @change="handleSelectChange">
    <el-option label="现结" value="现结"></el-option>
    <el-option label="商定结算周期" value="商定结算周期"></el-option>
  </el-select>
</el-form-item>
<el-form-item label="商定结算周期" v-if="processorForm.processortime === '商定结算周期'">
  <el-input v-model="processorForm.agreedSettlementPeriod" @blur="appendDayUnit" />
</el-form-item>
            <el-form-item label="加工厂对接人姓名" :required="true">
              <el-input v-model="processorForm.contactPersonName" />
            </el-form-item>
            <el-form-item label="加工厂对接人手机号" :required="false">
              <el-input v-model="processorForm.contactPersonPhone" />
            </el-form-item>
            <el-form-item label="收款人姓名" :required="true">
              <el-input v-model="processorForm.createname" />
            </el-form-item>
            <el-form-item label="收款人账户" :required="true">
              <el-input v-model="processorForm.createaccount" />
            </el-form-item>
            <el-form-item label="收款人开户行" :required="false">
              <el-input v-model="processorForm.createbank" />
            </el-form-item>
            <el-form-item label="备注" :required="false">
              <el-input v-model="processorForm.remark" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取消</el-button>
            <el-button type="primary" @click="handleAddProcessor">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
  
      <el-dialog v-model="dialogVisible2" title="编辑加工厂" width="30%" :before-close="handleClose" :show-close="false">
        <div>
          <el-form :model="processorForm" label-width="120px">
            <el-form-item label="加工厂名称" prop="processorName" :required="true">
              <el-input v-model="processorForm.processorName" />
            </el-form-item>
            <el-form-item label="加工厂类型" prop="processorType" :required="true">
             
              <el-select v-model="processorForm.processorType">
              <el-option label="镶嵌" value="镶嵌"></el-option>
              <el-option label="抛光" value="抛光"></el-option>
              <el-option label="证书机构" value="证书机构"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="默认加工周期（单位：天）" :required="true">
  <el-input v-model="processorForm.defaulttime" v-model.number="processorForm.defaulttime" @blur="addUnit" />
</el-form-item>
<el-form-item label="工费结算周期" :required="true">
  <el-select v-model="processorForm.processortime" onchange="handleSelectChange()">
    <el-option label="现结" value="现结"></el-option>
    <el-option label="商定结算周期" value="商定结算周期"></el-option>
  </el-select>
            </el-form-item>
            <el-form-item label="商定结算周期" v-if="processorForm.processortime === '商定结算周期'">
  <el-input v-model="processorForm.agreedSettlementPeriod" @blur="appendDayUnit" />
</el-form-item>
<el-form-item label="结算方式" prop="lendAmountLimit" :required="true">
              <el-select v-model="processorForm.lendAmountLimit">
              <el-option label="银行转账" value="银行转账"></el-option>
              <el-option label="支付宝转账" value="支付宝转账"></el-option>
              <el-option label="微信转账" value="微信转账"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
            </el-form-item>         
            <el-form-item label="加工厂对接人姓名" :required="true">
              <el-input v-model="processorForm.contactPersonName" />
            </el-form-item>
            <el-form-item label="加工厂对接人手机号" :required="true">
              <el-input v-model="processorForm.contactPersonPhone" />
            </el-form-item>
            <el-form-item label="收款人姓名" :required="true">
              <el-input v-model="processorForm.createname" />
            </el-form-item>
            <el-form-item label="收款人账户" :required="true">
              <el-input v-model="processorForm.createaccount" />
            </el-form-item>
            <el-form-item label="收款人开户行" :required="false">
              <el-input v-model="processorForm.createbank" />
            </el-form-item>
            <el-form-item label="备注" :required="false">
              <el-input v-model="processorForm.remark" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="handleUpdateProcessor">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
  
    </div>
  </template>
       
  <script >
  import { ref, defineComponent, reactive, toRefs, } from "vue";
import { ElMessageBox, ElMessage } from 'element-plus'
import { onMounted } from "vue";
import { getProcessorList, addProcessor, deleteProcessor, updateProcessor, getProcessorCode } from '@/api/user/user'
  
  export default defineComponent({
    name: "UserRole",
    components: {},
  
    setup() {
      let processorData = reactive({
        data: [],
      });
      const processorForm = reactive({
        processorName: '',
        processorCode: '',
        processortime:'',
        remark: '',
        status: 0,
        processorType: '',
        contactPersonName: '',
        contactPersonPhone: '',
        
        lendAmountLimit: '',
        defaulttime: '',
        agreedSettlementPeriod:'',
        createname:'',
        createaccount:'',
        createbank:'',
        deptId: "1",
        id: '',
        
      });
      const searchForm = reactive({
        name: '',
  
      });
      let dialogVisible1 = ref(false)
      const dialogVisible2 = ref(false)
      const processorRules = reactive({
        processorName: [{ required: true, message: '请输入内容', trigger: 'blur' },
        { min: 2, max: 8, message: '名称长度 在 2 到 8长度之间', trigger: 'blur' }],
      });
  
  
      //表格用到的参数
      let state = reactive({
        data: {
          page: 1,
          limit: 10,
          total: processorData.data.length,
        }
      });
  
      const filterTag = (value, row) => {
        return row.status == value
      }
      onMounted(() => {
        handleGetProcessorList(state.data.page, state.data.limit)
      })
  
  
      const handleGetProcessorList = (page, limit) => {
        getProcessorList(page, limit).then((res) => {
          processorData.data = res.rows
          state.data.total = res.total
        })
      }
      const tableData = () => {
        return processorData.data
      };
      //改变页码
      const handleCurrentChange = (e) => {
        state.page = e;
        handleGetProcessorList(e, state.data.limit)
      };
      //改变页数限制
      const handleSizeChange = (e) => {
        state.limit = e;
        handleGetProcessorList(state.data.page, e)
      };
  
      const openAdd=()=>{
        dialogVisible1.value=true
        getProcessorCode().then((res)=>{
          processorForm.processorCode=res
        })
      }
      //添加加工厂
      const handleAddProcessor = () => {
          if (
    processorForm.processorName === '' ||
    processorForm.processorType === '' ||
    processorForm.defaulttime === '' ||
    processorForm.lendAmountLimit === '' ||
    processorForm.processortime === '' ||
    processorForm.contactPersonName === '' ||
    processorForm.createname === '' ||
    processorForm.createaccount === ''
  ) {
    ElMessage.error('请输入内容');
    return;
  }
        ElMessageBox.confirm('确认提交?')
          .then(() => {
            addProcessor(processorForm).then(() => {
              dialogVisible1.value = false
              // 重置表单数据
        Object.keys(processorForm).forEach(key => {
          processorForm[key] = '';
        });
              handleGetProcessorList(state.data.page, state.data.limit)
            })
          })
          .catch(() => {
            // catch error
          })
  
      }
  
      const handleDeleteProcessor = (processorId) => { //删除仓位
        ElMessageBox.confirm(
          '是否要删除该加工厂?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            deleteProcessor(processorId).then(() => {
              handleGetProcessorList(state.data.page, state.data.limit)
              ElMessage({
                type: 'success',
                message: '删除成功',
              })
            })
          }).catch(() => {
            ElMessage({
              type: 'info',
              message: '取消操作',
            })
          })
      }
  
      const handleOpenEdit = (data) => { //打开编辑加工厂
        dialogVisible2.value = true
        processorForm.processorCode = data.processorCode
        processorForm.processorName = data.processorName
        processorForm.processorType = data.processorType
        processorForm.defaulttime = data.defaulttime
        processorForm.lendAmountLimit = data.lendAmountLimit
        processorForm.processortime = data.processortime
        processorForm.contactPersonName = data.contactPersonName
        processorForm.contactPersonPhone = data.contactPersonPhone
        processorForm.createname= data.createname
        processorForm.createaccount = data.createaccount
        processorForm.createbank = data.createbank
        processorForm.remark = data.remark
        processorForm.maxCap = data.maxCap
        processorForm.id = data.id

        processorForm.remark = data.remark
        processorForm.maxCap = data.maxCap
        processorForm.id = data.id


      }
      const handleUpdateProcessor = () => {  //编辑加工厂
        ElMessageBox.confirm('确认提交?')
          .then(() => {
            updateProcessor(processorForm).then(() => {
              dialogVisible2.value = false
              // 重置表单数据
        Object.keys(processorForm).forEach(key => {
          processorForm[key] = '';
        });
              handleGetProcessorList(state.data.page, state.data.limit)
            })
          })
          .catch(() => {
            // catch error
          })
      }
      const handleClose = (e) => { //提交表单
        ElMessageBox.confirm('确认提交?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
      }
      const onSearch=()=>{
        
      }
   
      
      return {
        processorData,
        dialogVisible1,
        dialogVisible2,
        searchForm,
        processorForm,
        processorRules,

        tableData, filterTag,
        handleCurrentChange,
        handleSizeChange,openAdd,
        handleClose,onSearch,
        handleDeleteProcessor, handleAddProcessor, handleGetProcessorList, handleUpdateProcessor,
        handleOpenEdit,
        ...toRefs(state),
      };

    },
    methods: {
    addUnit() {
      let num = parseInt(this.processorForm.defaulttime);
      if (num < 0 || num > 60 || isNaN(num)) {
        this.$message.error('请输入 0-60 之间的数字');
      } else {
        //this.processorForm.defaulttime = num + '天';
        
      }
    },
  }
  
  });

  const ProcessorForm = {
  methods: {
    handleSelectChange() {
      if (this.processorForm.processortime === '商定结算周期') {
        this.processorForm.agreedSettlementPeriod = '';
        this.$nextTick(() => {
          this.$refs.agreedSettlementPeriodInput.focus();
        });
      } else {
        this.processorForm.agreedSettlementPeriod = '';
      }
       // 新增以下代码，实现将输入值或选择值显示在 el-table-column 中
       this.$emit('update:processortime', processorForm.processortime === '商定结算周期'? processorForm.agreedSettlementPeriod : processorForm.processortime);
    },
    appendDayUnit() {
      if (this.processorForm.agreedSettlementPeriod) { // 添加条件判断
        //this.processorForm.agreedSettlementPeriod += '天';
      }
    }
  }
};

// 暴露 ProcessorForm 对象
export { ProcessorForm };
  </script>
      
  <style rel="stylesheet/scss" lang="scss" scoped>
  .front {
    background-color: #fff;
    padding: 10px;
    display: flex;
  
    .input {
      float: left;
    }
  
    .search {
      margin-left: 50px;
    }
  }
  
  .center {
    margin: 10px;
  }
  
  .form-add-checkbox {
    width: 200px;
    height: 260px;
    display: block;
    border: solid 1px #c9c9c9;
  
    .form-add-checkbox-item {
      width: 180px;
      margin: auto;
    }
  }
  
  .tail {
    background-color: #fff;
    margin-top: 40px;
    padding: 10px;
  
    .tail-action {
      margin-bottom: 10px;
      display: flex;
    }
  }
  </style>